<template>
  <div class="HelloWorld">
    <p>
      {{count}}
    </p>
    <p>
      {{fullName}}
    </p>
    <p>
      {{textA}}
    </p>
    <p>
      {{textB}}
    </p>
    <p>{{textPlus}}</p>
  </div>
</template>

<script>
  import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'

  export default {
    name: 'HelloWorld',
    mounted () {
      console.log(this.$store)
      setInterval(() => {
        this.updateCount({num: 10})
      }, 1000)
      this.updateCountAsync({
        num: 1000,
        time: 2000
      })
      // modules添加namespaced后
      this['a/updateText']('子mutations')
      // this.updateText('子mutations')
      this['a/actionsA']()
      this['b/actionsB']()
    },
    methods: {
      // modules添加namespaced后
      ...mapMutations(['updateCount', 'a/updateText']),
      // ...mapMutations(['updateCount', 'updateText']),
      ...mapActions(['updateCountAsync', 'a/actionsA', 'b/actionsB'])
    },
    computed: {
      // count () {
      //   return this.$store.state.count
      // },
      // ...mapState(['count']),
      // ...mapState({
      //   counter: 'count'
      // }),
      ...mapState({
        count: (state) => state.count,
        textA: state => state.a.text
      }),
      // fullName () {
      //   return this.$store.getters.fullName
      // }
      ...mapGetters({
        fullName: 'fullName',
        textPlus: 'a/textPlus'
      }),
      textB () {
        return this.$store.state.b.text
      }
    }
  }
</script>

<style>

</style>
